import { createBrowserRouter } from "react-router-dom";
import { App } from "@/components/App/App";
import React, { Suspense } from "react";
import { LazyLogin } from "@/pages/login/Login.lazy";
import { LazyCreateUser } from "@/pages/users/CreateUser/CreateUser.lazy";
import { LazyUsers } from "@/pages/users/Users/Users.lazy";
import { LazyPrediction } from "@/pages/prediction/Prediction.lazy";
import { LazyEditUser } from "@/pages/users/EditUser/EditUser.lazy";
import { LazySchedule } from "@/pages/schedule/Schedule.lazy";
import { LazyProfile } from "@/pages/profile/Profile.lazy";
import { LazyGantt } from "@/pages/gantt/Gantt.lazy";
import { LazyDashboard } from "@/pages/dashboard/Dashboard.lazy";
import { LazyNewEvents } from "@/pages/new_events/NewEvents.lazy";

const routes = [
  {
    element: <App />,
    children: [
      {
        path: "/",
        element: (
          <Suspense fallback="Loading...">
            <LazyDashboard />
          </Suspense>
        ),
      },
      {
        path: "/login",
        element: (
          <Suspense fallback="Loading...">
            <LazyLogin />
          </Suspense>
        ),
      },
      {
        path: "/profile",
        element: (
          <Suspense fallback="Loading...">
            <LazyProfile />
          </Suspense>
        ),
      },
      {
        path: "/users",
        element: (
          <Suspense fallback="Loading...">
            <LazyUsers />
          </Suspense>
        ),
      },
      {
        path: "/users/create",
        element: (
          <Suspense fallback="Loading...">
            <LazyCreateUser />
          </Suspense>
        ),
      },
      {
        path: "/users/:id",
        element: (
          <Suspense fallback="Loading...">
            <LazyEditUser />
          </Suspense>
        ),
      },
      {
        path: "/predictions",
        element: (
          <Suspense fallback="Loading...">
            <LazyPrediction />
          </Suspense>
        ),
      },
      {
        path: "/schedule",
        element: (
          <Suspense fallback="Loading...">
            <LazySchedule />
          </Suspense>
        ),
      },
      {
        path: "/gantt",
        element: (
          <Suspense fallback="Loading...">
            <LazyGantt />
          </Suspense>
        ),
      },
      {
        path: "/new_events",
        element: (
          <Suspense fallback="Loading...">
            <LazyNewEvents />
          </Suspense>
        ),
      },
    ],
  },
];

export const router = createBrowserRouter(routes);
